<template>
	<view class="sport-container">
		<u-navbar bgColor="#000000" autoBack height="90" placeholder fixed>
		</u-navbar>
		<!-- 总运动 -->
		<view class="sport-count">
			总运动
		</view>
		<view class="sport-time">
			<text style="font-size: 72rpx;">{{time?time:""}}</text>
			<!-- <text style="color: #595959;margin-left: 40rpx;">分钟</text> -->
		</view>
		<!-- 累计时间 -->
		<view class="time-num">
			<view class="time-left">
				<view class="">
					<text style="color: #595959;">累计</text>
					<text>0天</text>
				</view>
				<view class="" style="margin-left: 40rpx;">
					<text style="color: #595959;">连续</text>
					<text>0天</text>
				</view>
			</view>
			<view class="time-right">
				<text style="margin-right: 10rpx;">运动历史</text>
				<u-icon name="arrow-right" color="#ffffff"></u-icon>
			</view>
		</view>
		<!-- 跑步 -->
		<view class="run-box">
			<view class="run-title">跑步</view>
			<view class="run-num">
				<text style="font-size: 72rpx;">0.0</text>
				<text style="font-size: 48rpx;">公里</text>
			</view>
		</view>
		<!-- 运动数据 -->
		<view class="sport-data">
			<!-- 左侧数据 -->
			<view class="data-left">
				<view class="data-title">健身</view>
				<view class="data-content">
					<text style="font-size: 72rpx;">0</text>
					<text style="font-size: 48rpx;">分钟</text>
				</view>
			</view>
			<!-- 右侧数据 -->
			<view class="data-right">
				<view class="right-item" v-for="(item,index) in sportList" :key="index">
					<view class="right-item-title" :style="{color:item.color}">
						{{item.title}}
					</view>
					<view class="right-item-content" :style="{color:item.color}">
						<text style="font-size: 56rpx;">{{item.num}}</text>
						<text style="font-size: 36rpx;">公里</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 今日数据 -->
		<view class="today-data">
			<view class="today-title" style="font-size: 48rpx;">今日</view>
			<view class="today-content">
				<!-- 消耗 -->
				<view class="xh">
					<view class="xh-title">
						活动消耗
					</view>
					<view>
						<text class="xh-num">0</text>
						<text>千卡</text>
					</view>
				</view>
				<view class="xh">
					<view class="xh-title">
						运动时长
					</view>
					<view>
						<text class="xh-num">{{sportTime}}</text>
						<text>分钟</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sportList: [{
						title: "行走",
						num: "0.0",
						color: "#F37579"
					},
					{
						title: "骑行",
						num: "0.0",
						color: "#E98D44"
					},
					{
						title: "瑜伽",
						num: "0.0",
						color: "#1D39C9"
					},
				
				],
				time:"",
				sportTime:"",
			};
		},
		onShow() {
			this.time=sessionStorage.getItem("time")
			if(this.time)this.sportTime=this.time.slice(3,5)
		}
	}
</script>

<style lang="scss" scoped>
	.sport-container {
		height: 100%;
		background-color: #000000;
		overflow-y: auto;
		padding: 0 53rpx;

		.sport-count {
			font-size: 48rpx;
			font-weight: 400;
		}

		.sport-time {
			margin-top: 40rpx;
		}

		.time-num {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 40rpx;

			.time-left {
				display: flex;
				align-items: center;
			}

			.time-right {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 256rpx;
				border-radius: 10rpx;
				background: #7B0D9F;
				height: 89rpx;
				text-align: center;
				line-height: 89rpx;
			}
		}

		.run-box {
			margin-top: 40rpx;
			padding: 47rpx 65rpx;
			border-radius: 10rpx;
			background: #262626;

			.run-title {
				color: #77EB80;
				font-weight: 400;
				font-size: 48rpx;
			}

			.run-num {
				text-align: center;
				color: #77EB80;
				font-weight: bold;
			}
		}

		.sport-data {
			margin: 80rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 800rpx;

			.data-left {
				width: 164rpx;
				height: 100%;
				padding: 32rpx 68rpx;
				background-color: #262626;
				border-radius: 10rpx;

				.data-title {
					color: #8560E4;
					font-weight: 400;
					font-size: 48rpx;
				}

				.data-content {
					margin: 300rpx 0;
					color: #8560E4;
					font-weight: bold;
				}
			}

			.data-right {


				.right-item {
					padding: 32rpx 68rpx;
					border-radius: 10rpx;
					margin: 40rpx 0;
					width: 164rpx;
					background-color: #262626;

					.right-item-title {
						text-align: right;
						color: #F37579;
						font-weight: 400;
						font-size: 48rpx;
					}

					.right-item-content {
						margin: 40rpx 0;
						color: #F37579;
						font-weight: bold;
					}
				}
			}
		}

		.today-data {
			margin-bottom: 40rpx;
			padding: 50rpx 53rpx;
			border-radius: 10rpx;
			background: #262626;

			.today-content {
				display: flex;
				align-items: center;
				margin-top: 60rpx;
				.xh {
					margin-right: 80rpx;

					.xh-title {
						margin-bottom: 40rpx;
						color: #4B4B4B;
						font-weight: 400;
						font-size: 36rpx;
					}
					.xh-num{
						font-size: 72rpx;
						font-weight: 400;
						margin-right: 40rpx;
					}
				}
			}
		}
	}
</style>
